import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import { Row, Col, Spin, Card, Button, Icon, message } from "antd";
import DescriptionList from '../../../components/DescriptionList';
import PtathCuring from './PtathCuring';
import CuingList from './CuingList';
import styles from '../../Pbulic.less';

const { Description } = DescriptionList;

@connect(({ path,loading }) => ({
  detaildata:path.detaildata,
  loading:path.loading.detailinfo,
  pathcuring:path.pathcuring,
  loadingCuring:path.loading.curing_submit,
  loadingdev:path.loading.dev_curing
}))
export default class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.state={
      devCuringLeftChoose:[],
      devCuringRightChoose:[],
      doDel:false,
      doAdd:false,
    }
  }

  componentDidMount() {
    const { match, dispatch} = this.props;
    const detailInfoId = match.params.id && match.params.id!='detail' ? match.params.id : 0;
    dispatch({
      type: "path/fetch_path_info",
      payload: {
        lineId: detailInfoId
      }
    });
    dispatch({
      type: 'path/fetch_path_equipment',
      payload: {
        lineIds: [detailInfoId],
      },
    });
  }

  // 右侧选择 更新至对象
  handleSelectRight = items =>{
     this.setState({
       devCuringRightChoose:items,
     })
  }

  // 左侧选择 更新至对象
  handleSelectLeft = items =>{
    this.setState({
      devCuringLeftChoose:items,
    })
  }

  // 右侧列表选择后, 推送到左边框内
  handleMoveSelectAdd = items =>{
    const { dispatch } = this.props;
    const { devCuringRightChoose } = this.state;
    this.setState({
      doAdd:true,
      devCuringRightChoose:[],
    },()=>{
      dispatch({
        type: "path/fetch_curingupdate_add",
        payload: devCuringRightChoose
      });
    })
  }

  // 左侧列表选择后, 推送到右边框内
  handleMoveSelectDel= items =>{
    const { dispatch } = this.props;
    const { devCuringLeftChoose } = this.state;
    this.setState({
      doDel:true,
      devCuringLeftChoose:[],
    },()=>{
      dispatch({
        type: "path/fetch_curingupdate_del",
        payload: devCuringLeftChoose
      });
    })
  }

  // 左右两边更新完成
  handleUpdateAddOver = ()=>{
    this.setState({
      doAdd:false,
    })
  }

  handleUpdateDelOver = ()=>{
    this.setState({
      doDel:false,
    })
  }

  // 将设备节点保存到对应的路线
  handledoSave = ()=>{
    const { match, dispatch, pathcuring } = this.props;
    const detailInfoId = match.params.id && match.params.id!='detail' ? match.params.id : 0;
    pathcuring.length>0 && dispatch({
      type: "path/action_path_curing",
      payload: {
        lineId:Number(detailInfoId),
        devIds:pathcuring.map(item=>item.devId),
      }
    }).then(()=>{
      message.success("路线养护点已更新");
    });

  }

  render() {
    const { match, detaildata, pathcuring, loading,loadingCuring, loadingdev } = this.props;
    const { devCuringLeftChoose, devCuringRightChoose, doAdd, doDel } = this.state;



    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata &&
          <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={styles.small_card}>
            <Col md={10} sm={24} >
              <Card title={"当前路线信息"}
                    bodyStyle={{padding:1}}
                    extra={<Button type="primary"
                                   onClick={this.handledoSave}
                                   disabled={pathcuring.length>0 ? false : true}
                                   loading={loadingCuring}
                    >完成</Button>}
              >
                <DescriptionList size="large" col={1} style={{ margin:'10px 24px 10px 24px' }}>
                  <Description term="路线编号">{detaildata.lineCode}</Description>
                </DescriptionList>
                <DescriptionList size="large" col={2} style={{ margin:'10px 24px 10px 24px' }}>
                  <Description term="路线名称">{detaildata.lineName}</Description>
                  <Description term="保养单位">{detaildata.maintenanceName}</Description>
                </DescriptionList>
                <PtathCuring
                  // detailInfoId={detailInfoId}
                  // devCuring={devCuring}
                  doDel={doDel}
                  selectCallBack={this.handleSelectLeft}
                  refreshStop={this.handleUpdateDelOver}
                  tableData={pathcuring}
                  loading={loadingdev}
                />
              </Card>
            </Col>
            <Col md={2} sm={24}  className={styles.shuttleBtn} >
              <Button type="primary"
                      onClick={this.handleMoveSelectAdd}
                      disabled={devCuringRightChoose.length>0 ? false : true}
              >
                <Icon type="swap-left" />添加
              </Button>
              <Button type="primary"
                      onClick={this.handleMoveSelectDel}
                      disabled={devCuringLeftChoose.length>0 ? false : true}
              >
                删除<Icon type="swap-right" />
              </Button>
            </Col>
            <Col md={12} sm={24} >
              <Card
                title={"养护点选择"}
                bodyStyle={{padding:1}}
              >
                {
                  detaildata.maintenanceId &&
                  <CuingList
                    maintenanceId={detaildata.maintenanceId}
                    doAdd={doAdd}
                    selectCallBack={this.handleSelectRight}
                    refreshStop={this.handleUpdateAddOver}
                  />
                }
              </Card>
            </Col>
          </Row>
        }
      </Fragment>
    );
  }
}
